<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <canvas id="my-canvas" width="900" height="900"></canvas>

    <script>
        var ca=document.getElementById('my-canvas');
        var ctx=ca.getContext('2d');


        ctx.fillStyle="rgb(6,40,90)";
        ctx.beginPath();
        ctx.arc(250,250,250,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle="rgb(38,99,200)";
        ctx.beginPath();
        ctx.arc(250,300,200,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle="rgb(199,202,211)";
        ctx.beginPath();
        ctx.arc(250,350,150,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle="rgb(38,99,200)";
        ctx.beginPath();
        ctx.arc(250,400,100,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();

    </script>

</body>
</html>